<template>
  <div>
    <el-row>
      <el-col>
        <div id="riskChart5" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  let echarts = require('echarts/lib/echarts')

  export default {
    data() {
      return {
        msg: '',
        isShow: false,
        dts: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('riskChart5'));

        app.title = '折柱混合';
        var data1=[5, 15,8, 12, 25, 35, 13];
        var data2=[1, 1, 1, 2, 2, 3, 4];
        var data3=['特罗凯','艾乐替尼','安维汀','泰瑞沙','赛可瑞','达拉非尼','曲美替尼'];
        var option = {
          // backgroundColor: 'rgb(243,243,243)',
          color:['#fff','#fff'],

          tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: [
            {
              type: 'category',
              name: '产品名',
              data: data3,
              axisPointer: {
                type: 'shadow'
              },
              splitLine: {show: false},
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },

              axisLabel: {
                formatter: function (value, index) {
                  return data3[index];
                },
                color: '#fff'
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '声量',
              min: 0,
              max: 50,
              interval: 10,
              axisLabel: {
                formatter: '{value} ',
                color: '#fff'
              },
              splitLine: {show: false},
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              }
            }
          ],
          series: [
            {
              name:'声量',
              type:'bar',
              barWidth:30,
              itemStyle:{
                normal:{
                  color:function(item){
                    console.log(item)

                    if(data2[item.dataIndex]==1){
                      return '#6aa47a';
                    }
                    else if(data2[item.dataIndex]==2){
                      return '#c74749';
                    }
                    else if(data2[item.dataIndex]==3){
                      return '#d4c52a';
                    }
                    else{
                      return '#1b404a';
                    }


                  }
                }},
              data:data1
            }
          ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>
